import React, { Component } from 'react'
import { connect } from "react-redux"
import { bindActionCreators } from "redux";
import {actions,getCateTitle,getN,getCateGoods} from"../../store/modules/list"
import "./list.css"
import "../../assets/css/reset.css"
import Title from "../../components/title/Title"
 class list extends Component {
     componentDidMount(){
         let {list: { reqCate ,reqGoods},cateGoods} =this.props;
         reqCate()
        if(cateGoods.length<=0){
            reqGoods(1);
        }
     }
    render() {
        let { app, list: { changeN, reqGoods }, cateGoods, n ,history} = this.props;
        return (
            <div className='Cate'>
                <Title title="商品分类"></Title>
                <div className="cate-top">
                    <div className='box'>
                        <input type="text" placeholder='按内容搜索' />
                        <i className='iconfont icon-sousuo'></i>
                        <button>搜索</button>
                    </div>
                </div>
                <div className='main'>
                    <div className="left">
                        <ul>
                            {
                                app.map((item, index) => (
                                    <li key={item.id} onClick={() => reqGoods(index + 1)} className={index + 1 === n ? 'select' : ''} >
                                        {item.catename}
                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                    <div className='right'>
                        {
                            cateGoods.map(item => (
                                <div className='conlist' key={item.id} onClick={() => history.push('/detail/' + item.id)}>
                                    <img src={item.img} alt="pic" />
                                    <div className='wenzi'>
                                        <p> <i>限时 </i> {item.goodsname}</p>
                                        <div className='bottom'>
                                            <div className='fl'>
                                                <span>&yen; {item.price}</span>
                                                <span>&yen; {item.market_price}</span>
                                                <button>加入购物车</button>
                                            </div>
                                            <div className='fl'>
                                                <p>{item.description}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </div>
        )
    }
}
//状态
let mapStateToporps =(state)=>({
    app:getCateTitle(state),
    n:getN(state),
    cateGoods:getCateGoods(state)
})
//方法
let mapDispatchToProps=(dispatch)=>({
    list: bindActionCreators(actions, dispatch)
})

export default connect(mapStateToporps,mapDispatchToProps)(list)
